<template>
    <div v-loading="loading" class="wl-detaction">
        <i @click="handleBack()" class="el-icon-back wl_back"> 返回</i>
        <div class="wl-detaction__title">检测报告：{{name}}</div>
        <div v-if="showflag===1" :class="detaction_class[0]">
            <i v-if="code!==''" :class="detaction_class[1]"></i>
            <span>{{message}}</span>
        </div>
        <div v-if="showflag===2" class="wl-detaction__content">
            <div v-for="item in data" :key="item.title">
                <h1>{{item.title}}</h1>
                <div class="wl-detaction__item">
                    <span>原因：</span>
                    <p>{{item.why}}</p>
                </div>
                <div class="wl-detaction__item">
                    <span>解决建议：</span>
                    <p>{{item.how}}</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { checkProject } from '@/api/project'

export default {
  name: 'CheckProject',
  data() {
    return {
      loading: false,
      context: {}, // 父页面传递过来的参加，返回时带给父页面恢复上下文
      id: '',
      name: '',
      code: '',
      message: '',
      data: []
    }
  },
  computed: {
    showflag: function() {
        if (this.code !== 0 || (this.code === 0 && this.data.length==0)) {
            return 1
        } else {
            return 2
        }
    },
    detaction_class: function() {
        if (this.code !== 0) {
            return ['wl-detaction__error','el-icon-error']
        }
        return ['wl-detaction__success','el-icon-success']
    }
  },
  mounted() {
    const params = this.$route.params
    this.id = params.id
    this.name = params.name
    this.context = params.context
    this.checkProject()
  },
  methods: {
    checkProject() {
        if (!this.id) {
            return
        }
        this.loading = true
        checkProject(this.id).then(response => {
            this.loading = false
            let data = response.data
            this.code = data.code
            this.message = data.message
            this.data = data.data
        }).catch(error => {
            this.loading = false
            this.message = '请求异常！'
            console.log(error)
        })
    },
    handleBack() {
        this.$router.replace({name:'WalleProject', params: this.context})
    }
  }
}
</script>

<style scoped>
    h1 {
        display: block;
        font-size: 2em;
        margin-block-start: 0.67em;
        margin-block-end: 0.67em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
        font-weight: bold;
    }
    .wl_back {
        color: #1890ff;
        font-size: 16px;
        margin-bottom: 20px;
        cursor: pointer;
    }
    .wl-detaction {
        box-sizing: border-box;
        min-height: calc(100% - 40px);
        /* padding: 10px; */
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column;
        flex-direction: column;
        color: #606266;
    }
    .wl-detaction__content p {
        margin: 0px;
        font: inherit;
        vertical-align: baseline;
        font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
        font-size: 12px;
        line-height: 20px;
    }
    .wl-detaction__content span {
        font: inherit;
        vertical-align: baseline;
        font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
        font-size: 12px;
    }
    .wl-detaction__content h1 {
        font-size: 16px;
        font-weight: 500;
        line-height: 30px;
        border-bottom: 1px solid #606266;
    }
    .wl-detaction__title {
        line-height: 30px;
        font-size: 20px;
        color: #1890ff;
    }
    .wl-detaction__success {
        margin: 100px auto;
        color: #67c23a;
        font-size: 20px;
    }
    .wl-detaction__error {
        margin: 100px auto;
        color: red;
        font-size: 20px;
    }
    .wl-detaction__item {
        margin: 20px 0;
        padding: 0 20px;
        line-height: 12px;
    }
    .wl-detaction__item span {
        color: #1890ff;
    }
</style>